



<!-- 父子组件的访问方式 -->
<!-- 父组件访问子组件, $ref -->
    <!-- 需要注册 -->
<!-- 子组件访问父组件, $parent -->
    <!-- 直接就能访问 -->
    <!-- 一般不用这个来搞子访问父,而是用props,因为直接this.$parent,组件容易复用,变量容易重复,耦合性太高, -->
<!-- 子组件访问根组件, $root -->
<template>
    <div>
        <!-- 1.ref用于注册元素或子组件的引用-->
        <!-- 将Hello组件引用了,引用名为hello -->
        <Hello ref="hello"></Hello>
        <!-- 将p标签注册了,注册名为pp -->
        <p ref="pp" id="testId"></p>
    </div>
</template>
<script>
import Hello from './Hello.vue'
export default {
    data(){
        return{
            msg: "helloworld"
        }
    },
    components:{
    Hello,
    },
    mounted(){//生命周期函数,会在某个特定的时期,执行这个函数
        // 2.当我们获取值的时候使用$refs
        // 这里通过引用名.a获取到了子组件的data.a
        console.log(this.$refs.hello.a)// console.log(this.$refs.hello)
        // 这里通过注册名名.a获取到了子组件的data
        console.log(this.$refs.pp.id) //console.log(this.$refs.pp)
    }
}
</script>

